<template>
  <div class="creator-list-item-wrapper">
    <div class="hover" :class="{extend: ifSelect}"></div>
    <span>{{ placeholder }}</span>
  </div>
</template>

<script>
  export default {
    props: {
      ifSelect: {
        type: Boolean,
        default: () => false
      },
      placeholder: {
        type: String,
        default: () => "BTN"
      }
    },
  }
</script>

<style lang="less" scoped>
@w: var(--creatorListItemWidth);
@h: var(--creatorListItemHeight);
@fs: var(--creatorListItemFontsize);

.creator-list-item-wrapper {
  width: @w;
  height: @h;

  font-size: @fs;
  line-height: @h;
  text-align: center;
  color: var(--dark);

  &:hover {
    cursor: pointer;

    .hover {
      width: calc(@w * 0.01);
    }
  }

  span {
    position: relative;
    pointer-events: none;
    z-index: 1;
  }

  .hover {
    position: absolute;
    top: 0;
    left: 0;

    width: 0;
    height: @h;
    border-radius: calc(@h * 0.05);
    background-color: rgb(221, 244, 255);
    // opacity: .5;

    pointer-events: none;
    transition: .3s;
  }

  .extend {
    width: @w !important;
    // opacity: .3;
  }
}
</style>